<meta charset="utf-8">
<style>
    .active {
        border:1px solid red;
    }
    tbody{
        border-top:1px solid red;
    }
</style>
<body>
<div class="consumable-speac-container">
    <div class="consumable-speac-list">
        <p class="title">商品规格</p>
        <div v-for="item in specData" class="list-container">
            <span class="spec-name">{{item.name}}</span>
            <span class="btn  btn-sm  mrg10L" v-for="index in item.specList" @click="addSpec($event,item,index)" :data-id="index.id" :data-name="index.name">{{index.name}}</span>
        </div>
    </div>
    <table class="table consumable-speac-detail">
        <thead>
        <tr>
            <th v-for="item in specList.header">{{item}}</th>
            <th>价格</th>
            <th>库存</th>
            <th>sku</th>
        </tr>
        </thead>
        <tbody >
            <tr v-for="row in specList.body">
                <template v-for="col in row">
                    <td>
                        {{col}}
                    </td>
                </template>
                <td>Row 1</td>
                <td>Row 2</td>
                <td>Row 3</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
<script src="jquery-2.0.0.js"></script>
<script src="vue.min.js"></script>
<script>
    let specData = [
        {
            id: 1,
            name: '网络',
            specList: [
                {
                    id:1,
                    name:'4g',
                    isAdd: false
                },
                {
                    id:2,
                    name: '3g',
                    isAdd: false
                }
            ]
        },
        {
            id: 2,
            name: '内存',
            specList: [
                {
                    id:1,
                    name:'16g',
                    isAdd: false
                },
                {
                    id:2,
                    name: '8g',
                    isAdd: false
                },
                {
                    id:3,
                    name: '64g',
                    isAdd: false
                },
                {
                    id:4,
                    name: '128g',
                    isAdd: false
                }
            ]
        },
        {
            id:3,
            name:"屏幕",
            specList: [
                {
                    id: 1,
                    name:'文字屏',
                    isAdd: false
                },
                {
                    id: 2,
                    name: '触屏',
                    isAdd: false
                }
            ]
        },
        {
            id: 4,
            name: '颜色',
            specList: [
                {
                    id: 1,
                    name:'黑色',
                    isAdd: false
                },
                {
                    id: 2,
                    name: '白色',
                    isAdd: false
                },
                {
                    id: 3,
                    name: '金色',
                    isAdd: false
                },
                {
                    id: 4,
                    name: '银色',
                    isAdd: false
                },
                {
                    id: 5,
                    name: '玫瑰金',
                    isAdd: false
                },
            ]
        }
    ]

    let specList={
        header:[],
        body:[]
    }
    let checkedList=[];
    for(let i=0;i<specData.length;i++){
        checkedList[i]=[];
    }
    var test=new Vue({
        el: 'body',
        data() {
            return {
                specData,
                specList,
                clickFlag: false
            }
        },
        ready(){
            //lev1表示大规格循环起点， 以网络为起点
            //lev2表示小规格循环起点（index 颜色），
            //lev3表示具体几个小规格
        },
        methods: {
            addSpec(event,lev1,lev2) {
                //加入已选择列表

                var index1=lev1.id-1;
                var index2=lev2.id-1;
                var existIndex=checkedList[index1].indexOf(index2);

                if(existIndex<0){
                    checkedList[index1].push(index2);

                }else{
                    checkedList[index1].splice(existIndex, 1);
                }
                //添加active
                for(let i=0;i<checkedList.length;i++){

                    if(checkedList[i]) {
                        let dom=$('.list-container').eq(i).find('.btn').removeClass('active');
                        for (let j = 0; j < checkedList[i].length; j++) {
                            dom.eq(checkedList[i][j]).addClass('active');
                        }
                    }
                }
                let tmp=[];
                for(let i=0;i<checkedList.length;i++){
                    tmp[i]={};
                    tmp[i]['id']=i;
                    if(checkedList[i]) {
                        tmp[i]['len']=checkedList[i].length;
                        tmp[i]['checked']=checkedList[i];
                    }else{
                        tmp[i]['len']=0;
                    }
                }
                tmp.sort(function(a,b){
                    if(a.len>b.len){
                        return 1;
                    }else{
                        return -1;
                    }
                })
                while(tmp.length&&!tmp[0].len) {
                    tmp.shift();
                }
                //theader处理数据；
                {

                    specList.header=[];
                    for(let i=0;i<tmp.length;i++){
                        specList.header[i]=specData[tmp[i].id].name;
                    }
                }


                //tbody处理数据；

                {
                    let dataCache=[];
                    var count=1;
                    var naryArr= [];
                    //lenarr=[3,2,2]
                    //naryarr=[4,2,1]
                   // 11=2 1 1;
                   // 10=2 1 0;
                   // 9=2 0 1;
                   // 8=2 0 0;
                   // 7=2 1 0;
                   // 6=2 1 0;
                   // 5=2 1 0;
                   // 4=2 0 0;
                   // 3=1 0 0;
                   // 2=1 0 0;
                   // 1=0 1 0;
                   // 0=0 1 0;
                    //lenarr[1,1,2,2]
                    //naryarr=[4,4,2,1]
                    //0,0,1,1
                    //3=0 0 1 1
                    //2=0 0 1 0
                    //1=0 0 0 1
                    //3=0 0 0 0
                    //lenarr[1,2,2,3]
                    //naryarr=[4,4,2,1]
                    //
                    {
                        //处理count
                        //处理进制数组
                        for(let i=0;i<tmp.length;i++){
                            count*=tmp[i].len;
                            naryArr.push(tmp[i].len)
                        }
                        count--;
                        let cache=[];
                        for (let i = naryArr.length; i > 0; i--) {
                            let r = 1;
                            for (let j = i - 1; j > 0; j--) {
                                r *= naryArr[naryArr.length-j];
                            }
                            cache[naryArr.length-i] = r;
                        }
                        naryArr=cache;
                        //唯一化进制
                        for(let i=0;i<naryArr.length;i++){
                            if(naryArr[i]==naryArr[i+1]){
                               naryArr[i]=0;
                            }
                        }
                    }
                    function splitCount(count){
                        var result=[];
                        var reminder=count;

                        for(var i=0;i<naryArr.length;i++){
                            if(naryArr[i]==0){
                                result[i]=0;
                                continue;
                            }
                            result[i]=Math.floor(reminder/naryArr[i]);
                            reminder=reminder%(naryArr[i]);
                        }
                        return result;
                    }
                    while(count>-1){
                        var splitArr=splitCount(count);
                        var result=[];
                        for(var i=0;i<tmp.length;i++){
                            var id=tmp[i].id;
                            var checkIndex=splitArr[i]
                            var checked=tmp[i].checked[checkIndex]
                            console.log(tmp[i]);
                            console.log('id==='+id);
                            console.log('checkIndex==='+checkIndex)
                            console.log('checked===='+checked)
                            result[i]=specData[id].specList[checked].name;
                        }

                        dataCache.push(result)
                        count--;
                    }
                    //隐藏名称相同列
                    for(var i=dataCache.length;i>0;i--){
                        if(dataCache[i-2]){
                            for(var j=0;j<dataCache[i-2].length;j++) {
                                if(dataCache[i-1][j]==dataCache[i-2][j]) {
                                    dataCache[i - 1][j] = '';
                                }
                            }
                        }
                    }
                    specList.body=dataCache;
                }
            }
        }
    })

</script>